<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Home</title>

    <!-- Main Styles -->
    <link rel="stylesheet" href="../static/styles/style.min.css">

    <!-- Material Design Icon -->
    <link rel="stylesheet" href="../static/fonts/material-design/css/materialdesignicons.css">

    <!-- mCustomScrollbar -->
    <link rel="stylesheet" href="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

    <!-- Waves Effect -->
    <link rel="stylesheet" href="../static/plugin/waves/waves.min.css">

    <!-- Sweet Alert -->
    <link rel="stylesheet" href="../static/plugin/sweet-alert/sweetalert.css">

    <!-- Morris Chart -->
    <link rel="stylesheet" href="../static/plugin/chart/morris/morris.css">

    <!-- FullCalendar -->
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.print.css" media='print'>

    <!-- Dark Themes -->
    <link rel="stylesheet" href="../static/styles/style-black.min.css">
</head>

<body>
<script src="../static/scripts/include.js"></script>
<!--<include src="menu.html"></include>-->
<!--<include src="nav.html"></include>-->
<div th:replace="menu"></div>
<div th:replace="nav"></div>

<div id="wrapper">
    <div class="main-content">
        <div class="row small-spacing">
            <div class="col-xs-12">
                <div  data-pattern="priority-columns">
                    <div class="input-group col-xs-4 col-lg-offset-8 margin-bottom-20" >
                        <input type="text" id="findByexample" class="form-control" placeholder="请输入姓名/车位号">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="statues">
                                <span >状态选择</span>
                                <span class="fa fa-caret-down"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" id="choose">
                                <li><a href="#" >请选择状态</a></li>
                                <li><a href="#" >已出租</a></li>
                                <li><a href="#" >未出租</a></li>
                            </ul>
                            <button id="search1" type="button" class="btn btn-violet no-border waves-effect waves-light"><i class="fa fa-search text-white"></i></button>
                        </div>
                        <!-- /.input-group-btn -->
                    </div>
                    <table class="table table-small-font table-bordered table-striped">
                        <thead align="center">
                        <tr>
                            <td>编号</td>
                            <td>车位号</td>
                            <td>状态</td>
                            <td>电话号码</td>
                            <td>户主姓名</td>
                        </tr>
                        </thead>
                        <tbody id="list_body" align="center">

                        </tbody>

                    </table>
                    <ul class="pagination" id="byPage"/>
                </div>
                <!-- /.box-content -->
            </div>
            <!-- /.col-lg-6 col-xs-12 -->
        </div>
        <!-- /.row small-spacing -->
        <footer class="footer">
            <ul class="list-inline">
                <li>Copyright &copy; 2020.Dawn-Organization.
                </li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="http://www.baidu.com">Help</a></li>
            </ul>
        </footer>
    </div>
    <!-- /.main-content -->
</div><!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../static/script/html5shiv.min.js"></script>
<script src="../static/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../static/scripts/jquery.min.js"></script>
<script src="../static/scripts/modernizr.min.js"></script>
<script src="../static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../static/plugin/nprogress/nprogress.js"></script>
<script src="../static/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="../static/plugin/waves/waves.min.js"></script>

<!-- Responsive Table -->
<script src="../static/plugin/RWD-table-pattern/js/rwd-table.min.js"></script>
<script src="../static/scripts/rwd.demo.min.js"></script>

<script src="../static/scripts/main.min.js"></script>
</body>
</html>
<script>
    $(document).ready(function () {
        show(1);

        $("#search1").click(function () {
            show(1);
        })
    })

    function show(pageNum) {
        let info=$("#findByexample").val();
        let statuses = $("#statues").text();
        $.ajax({
            url: "/property/showParkList",
            type: "post",
            data: {"pageNum": pageNum,"info":info,"statuses":statuses},
            success: function (obj) {
                if (obj.result) {
                    let message = "";
                    $.each(obj.showParkingList, function (index, park) {
                        message += '<tr>';
                        message += '<td>' + (index + 1) + '</td>';
                        message += '<td>' + park.pnumber + '</td>';
                        message += '<td>' + park.status + '</td>';
                        message += '<td>' + park.userInfo.ownUser.phone + '</td>';
                        message += '<td>' + park.userInfo.uname + '</td>';
                        message += '</tr>';
                    });
                    $("#list_body").html(message);
                    var pageMessage = "";
                    pageMessage += '<li class="' + (obj.pageInfo.pageNum == 1 ? "disabled"
                        : "") + '"><a onclick="show(' + obj.pageInfo.prePage + ')">上一页</a></li>';
                    for (var i = 1; i <= obj.pageInfo.pages; i++) {
                        pageMessage += '<li class="' + (obj.pageInfo.pageNum == i ? "active" : "")
                            + '"><a onclick="show(' + i + ')">' + i + ' <span class="sr-only">(current)</span></a></li>';
                    }
                    pageMessage += '<li class="'
                        + (obj.pageInfo.pageNum == obj.pageInfo.pages ? "disabled" : "") + '"><a onclick="show('
                        + obj.pageInfo.nextPage + ')">下一页</a></li>';
                    $("#byPage").html(pageMessage);
                }
            }
        })
    }
    $("#choose li").click(function () {
        let mes = $(this).html();
        $("#statues").html(mes);
    })
</script>